<template>
  <div>
    <van-nav-bar title="产品详情" fixed>
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <!-- <div class="xx"></div> -->
    <div class="prodect-top">
      <div>
        <img
          src="~assets/image/icon_fgsc_product_logo_icon.png"
          width="40"
          height="40"
          alt=""
        />
        <p class="grade">{{ grade }}</p>
      </div>
      <p>{{ gradeName }}</p>
      <div class="prodect-top-filex"></div>
    </div>

    <div class="xian"></div>
    <div class="product-item" v-for="(item, index) in channelInfo" :key="index">
      <div class="product-item-img">
        <img src="../assets/image/logo.png" alt="" width="35" height="35" />
        <div class="product-item-img-txt">
          <p class="title">{{ item.name }}</p>
          <p>{{ item.remarks }}</p>
        </div>
      </div>
      <div class="product-item-bk">
        <p>
          单笔限额(元)：
          <span>
            {{ item.singleMinLimit }} - {{ item.singleMaxLimit | getMoeny }}
          </span>
        </p>
        <p>
          交易时间：
          <span>{{ item.startTime }} - {{ item.endTime }}</span>
        </p>
      </div>
      <div class="product-item-bk">
        <p>
          单日限额(元)：
          <span>{{ item.everyDayMaxLimit | getMoeny }}</span>
        </p>
        <p>
          交易费率：
          <span>{{ item.rate | getRate }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { queryChannelInfoByProductionIdApi } from "network/ApiServe";
export default {
  name: "ProductDetail",
  filters: {
    getRate(rate) {
      return parseFloat(rate * 100).toFixed(2) + "%";
    },
    getMoeny(money) {
      if (money.toString().length >= 5) {
        if (money.toString().substring(money.toString().length - 4) == "0000") {
          return (
            money.toString().substring(0, money.toString().length - 4) + "万"
          );
        } else {
          return (money / 10000).toFixed(2) + "万";
        }
      }
      return money;
    },
  },
  data() {
    return {
      gradeName: this.$route.params.gradeName,
      grade: this.$route.params.grade,
      id: this.$route.params.id,
      channelInfo: [],
    };
  },
  mounted() {
    this.getChannelInfo();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    getChannelInfo() {
      let _this = this;
      console.log("_this.grade", typeof _this.grade);
      queryChannelInfoByProductionIdApi(this.id)
        .then((res) => {
          console.log("queryChannelInfoByProductionIdApi:", res);
          if (res.resp_code === "000000") {
            res.result.filter((item) => {
              if (item.subName.indexOf("还款") > -1) {
                _this.channelInfo.push(item);
                // if (parseInt(item.channelNo) == _this.grade) {

                // }
              }
            });
            console.log("channelInfo", _this.channelInfo);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.xx {
  margin-top: 45px;
}
.prodect-top {
  height: 100px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin-top: 46px;
  text-align: center;
  background-color: #fff;
  font-size: 20px;
}
.prodect-top img {
  margin-top: 15px;
  margin-bottom: 5px;
}
.grade {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 32px;

  margin-left: 21px;
  font-size: 15px;
}
.xian {
  height: 140px;
}
.prodect-top-filex {
  height: 10px;
  margin-top: 10px;
  background-color: #efefef;
}
.product-item {
  margin-top: 2px;
  background-color: #fff;
  padding: 15px;
}
.product-item-img {
  display: flex;
  text-align: center;
  align-items: center;
}
.product-item-img-txt {
  padding-left: 10px;
  font-size: 14px;
  margin: 3px;
  color: #999;
}
.product-item-img-txt p.title {
  color: #444;
  font-size: 16px;
  margin-bottom: 5px;
}

.product-item-bk {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.product-item-bk p {
  flex: 1;
}
.product-item-bk p span {
  color: coral;
}
</style>